<template>
    <div class="layout">
        <Layout>
            <Layout :style="{ padding: '0 24px 24px' }">
                <Breadcrumb :style="{ margin: '24px 0' }">
                    <BreadcrumbItem>请在这里查看你的信箱喔</BreadcrumbItem>
                </Breadcrumb>
                <Content :style="{ padding: '24px', minHeight: '580px', background: '#fff' }">
                    <Table border :columns="columns" :data="data">
                    </Table>
                    <!-- <Modal v-model="modal" title="设置名称" @on-ok="ok(this.pos)" @on-cancel="cancel">
                        <Input v-model="value" placeholder="请输入名称" style="width: 300px" />
                    </Modal> -->
                </Content>
            </Layout>
        </Layout>
    </div>
</template>
<script>
import { reduce } from 'lodash';
import { resolveComponent } from 'vue';

export default {
    name: 'AdminList',
    data() {
        return {
            modal: false,
            value: '',
            pos: 0,
            columns: [
            {
                    title: '昵称',
                    key: 'senderNickname',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('strong', params.row.senderNickname)
                        ]);
                    }
                }, 
                {
                    title: '发件人',
                    key: 'sender',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('strong', params.row.sender)
                        ]);
                    }
                },   //发件人所在的一列属性
                {
                    title: '主题',
                    key: 'subject',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', params.row.subject);
                    }
                },
                {
                    title: '正文',
                    key: 'content',
                    align: 'center',
                    render: (h, params) => {
                        return h('span', [
                            h(resolveComponent('a'), {
                                style: {
                                    marginRight: '5px',
                                    'color': '#0000FF'
                                },
                                onClick: () => {
                                    window.open("http://baidu.com");
                                }  //正文内容绑定事件，点击后跳转到具体正文内容
                            }, {
                                default() {
                                        return params.row.content
                                    }
                            })
                        ])
                    }
                },  //主题所在的一列
                // {
                //     title: '附件',
                //     align: 'center',
                //     key: 'file',
                //     render: (h, params) => {
                //         return h('span', [
                //             h(resolveComponent('a'), {
                //                 style: {
                //                     marginRight: '5px',
                //                     'color': '#0000FF'
                //                 },
                //                 onClick: () => {
                //                     window.open("http://baidu.com");   //附件内容绑定事件，点击后跳转到具体文件
                //                 }
                //             }, {
                //                 default() {
                //                     return params.row.file
                //                 }
                //             })
                //         ])
                //     }
                // },
                {
                    title: '发送时间',
                    key: 'sendTime',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('strong', params.row.sendTime)
                        ]);
                    }
                }, 
                {
                    title: '操作',
                    key: 'action',
                    width: 180,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(resolveComponent('Button'), {
                                type: 'error',
                                style: {
                                    marginRight: '5px',
                                    'color': '#000000'
                                },
                                onClick: () => {
                                    this.remove(params.index)    //点击某一行的删除按钮后，删除这行全部内容
                                }
                            }, {
                                default() {
                                    return '删除'
                                }
                            }),
                            h(resolveComponent('Button'), {   //转发按钮，绑定函数forward
                                type: 'primary',
                                style: {
                                    marginRight: '5px',
                                    'color': '#000000'
                                },
                                onClick: () => {
                                    this.forward(params.index)
                                }
                            }, {
                                default() {
                                    return '转发'
                                }
                            })
                        ])
                    }
                }
            ],
            data: [
                // {
                    // sender: "3271127586@qq.com萱",
                    // subject: "冰醋酸出版处骄傲你觉得费尔法奇偶",
                    // content: "冰醋酸出版",
                    // file: "hi.pdf",
                    // sendTime:"",
                    // senderNickname:""
                // }

            ]
        }
    },
    created(){
        this.$store.dispatch('email/receivedByPOP3',{"account": "2900807385@qq.com","password":"sotwiwatqooodcdb"})
        .then(res => {
          console.log("后端返回")
          console.log(res)
      //    this.data.push(res.data[0]);
          for(var i=0;i<res.data.length;i=i+1){
        if(res.data[i]===null){
            
        }else{
            this.data.push(res.data[i])
        }
          }
        //  this.data=res.data;
        //   var data=res.data;
        //   for(var i=0;i<data.length;i=i+1){
        //     var messageGroup={
        //         sender: "3271127586@qq.com萱",
        //         subject: "冰醋酸出版处骄傲你觉得费尔法奇偶",
        //         content: "冰醋酸出版",
        //         attachment:[],
        //         sendTime:null,
        //         senderNickname:""
        //     };
        //     messageGroup.sender=data[i].sender;
        //     messageGroup.subject=data[i].subject;
        //     messageGroup.content=data[i].content;
        //     messageGroup.sendTime=data[i].sendTime;
        //     messageGroup.attachment=data[i].attachment;
        //     messageGroup.senderNickname=data[i].senderNickname;

        //     this.data.push(messageGroup);
        //   }
        //   this.$message({
        //     type: "success",
        //     message: "发送成功"
        //   })
        })
        .catch(error => {
          console.log(error)
          this.$message({
            type: "error",
            message: "失败"
          })
        })
    },
    methods: {
        remove(index) {
            console.log("下标：" + index)
            this.data.splice(index, 1);  //删除信件,绑定删除按钮,点击后删除整行内容
        },
        forward(index)   //转发信件,绑定转发按钮
        {

        }
    }
}
</script>
